<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<html>
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Prueba con Primefaces</title>
</h:head>

<h:body>
	<h:form id="form">

		<p:growl id="messages" showDetail="true" />

		<p:dataTable var="car" value="#{tableBean.carsSmall}" id="carList"
			editable="true">

			<f:facet name="header">
            In-Cell Editing
        </f:facet>

			<p:ajax event="rowEdit" listener="#{tableBean.onEdit}"
				update=":form:messages" />
			<p:ajax event="rowEditCancel" listener="#{tableBean.onCancel}"
				update=":form:messages" />

			<p:column headerText="Model" style="width:125px">
				<p:cellEditor>
					<f:facet name="output">
						<h:outputText value="#{car.model}" />
					</f:facet>
					<f:facet name="input">
						<p:inputText value="#{car.model}" style="width:100%" />
					</f:facet>
				</p:cellEditor>
			</p:column>

			<p:column headerText="Year" style="width:125px">
				<p:cellEditor>
					<f:facet name="output">
						<h:outputText value="#{car.year}" />
					</f:facet>
					<f:facet name="input">
						<p:inputText value="#{car.year}" style="width:100%" label="Year" />
					</f:facet>
				</p:cellEditor>
			</p:column>

			<p:column headerText="Manufacturer" style="width:125px">
				<p:cellEditor>
					<f:facet name="output">
						<h:outputText value="#{car.manufacturer}" />
					</f:facet>
					<f:facet name="input">
						<h:selectOneMenu value="#{car.manufacturer}">
							<f:selectItems value="#{tableBean.manufacturers}" var="man"
								itemLabel="#{man}" itemValue="#{man}" />
						</h:selectOneMenu>
					</f:facet>
				</p:cellEditor>
			</p:column>

			<p:column headerText="Color" style="width:125px">
				<p:cellEditor >
					<f:facet name="output">
						<h:outputText value="#{car.color}" />
					</f:facet>
					<f:facet name="input">
						<h:selectOneMenu value="#{car.color}">
							<f:selectItems value="#{tableBean.colors}" var="color"
								itemLabel="#{color}" itemValue="#{color}" />
						</h:selectOneMenu>
					</f:facet>
				</p:cellEditor>
			</p:column>

			<p:column headerText="Options" style="width:50px">
				<p:rowEditor >
					
				</p:rowEditor>
			</p:column>

		</p:dataTable>

	</h:form>
</h:body>
	</html>
</f:view>
